import * as React from 'react';
import classNames from 'classnames';

export interface ButtonProps {
	children?: React.ReactNode;
	className?: string;
	type?: 'default' | 'primary' | 'ghost' | 'dashed' | 'link' | 'text';
	size?: string;
	shape?: string;
	block?: boolean;
	danger?: boolean;
	ghost?: boolean;
	icon?: React.ReactNode;
	disabled?: boolean;
	onClick?: (e: React.MouseEvent<HTMLElement>) => void;
}

function spaceChildren(children: React.ReactNode) {
	return (children ? <span>{children}</span>:null)
}
const Button: React.FC<ButtonProps> = props => {
	const prefixCls = 'bh-btn';
	const {
		children,
		className,
		type,
		size,
		shape,
		block = false,
		danger = false,
		ghost = false,
		icon,
		...restProps
	} = props;
	let sizeCls = '';
	switch (size) {
		case 'large':
			sizeCls = 'lg';
			break;
		case 'small':
			sizeCls = 'sm';
			break;
		default:
		    break;
	}
	const classString = classNames(
		prefixCls,
		className,
		{
			[`${prefixCls}-${type}`]: type,
			[`${prefixCls}-${sizeCls}`]: sizeCls,
			[`${prefixCls}-${shape}`]: shape !== 'default' && shape,
			[`${prefixCls}-block`]: block,
			[`${prefixCls}-dangerous`]: !!danger,
			[`${prefixCls}-background-ghost`]: ghost,
		}
	);
	const kids = children ? spaceChildren(children) : null;

	return (
		<button {...restProps} className={classString}>
		    {icon}
		    {kids}
		</button>
	)
};

export default Button;